<template>
    <div class="wy-main supply-dedicatedLine">
			<a-form>
				<div class="route">
					<p class="route_text">长途整车业务是物流云为整车货物调配优质返程车辆的服务，根据货物重量和体积及车型需求，快速调配优质低价返程车辆，让企业发货又快又省钱！</p>
					<div class="route_choice">
						<p><b>线路信息</b></p>
						<a-row>
						<a-col :span="12" class="choice-left">
							<div class="distance" v-if="distance">
								<div class="border-top"></div>
								约<span style="color: red;">{{distance}}</span>公里
								<div class="border-bottom"></div>
							</div>
							<a-form-item label="出发地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择出发地!' }]}]"
								 placeholder='请选择出发地' ref="userNameInput">
									<a-icon type="environment" slot="suffix" style="color: #15837A;" />
								</a-input>
							</a-form-item>
							<a-form-item label="到达地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择出发地!' }]}]"
								 placeholder='请选择到达地'>
									<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="街道/门牌号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['fromStreet']" placeholder="详细街道地址（可不填）" @click="getdepartureStreet" />
							</a-form-item>
							<a-form-item label="街道/门牌号" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['toStreet']" placeholder="详细街道地址（可不填）" @click="getdestinationStreet" />
							</a-form-item>
						</a-col>
				  	</a-row>
					</div>
					<a-divider style="width: 95%;margin: 0;margin-left: 20px; margin-top:10px; margin-bottom:10px" />
					<div class="route_choice ">
					<p><b>货物信息</b></p>
					<div class="route_bg">
							<a-form-item label="货物图片" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }" class="upzjimg">
							<a-upload name="avatar" listType="picture-card" class="avatar-uploader" :showUploadList="false" action="//jsonplaceholder.typicode.com/posts/" :beforeUpload="beforeUpload" @change="handleChange">
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                </div>
              </a-upload>
					</a-form-item>
					<a-form-item label="货物名称" :label-col="{lg: { span: 24}, xl: { span: 2,}}" :wrapper-col="{lg: { span: 24}, xl: { span: 21}}">
							<a-input style="width: 9%;" v-decorator="[ 'cargoName', {rules: [{ required: true, message: '货物名称不能为空!' }]}]"/>
							<a-select style="width: 10%;margin-left: 10px;"  v-decorator="[ 'cargoCategoryKey']">
								<!-- <a-select-option :value="item.dictKey" v-for="(item,index) in goodsType" key='index'>
									{{item.dictValue}}
								</a-select-option> -->
							</a-select>
							<span style="margin-left: 10px;">货物类型：</span>
							<a-select  v-decorator="[ 'cargoType', {initialValue: '1'}]"  style="width: 9%">
								<a-select-option value="1"> 重货 </a-select-option>
								<a-select-option value="2"> 轻货</a-select-option>
							</a-select>
							<span style="margin-left: 10px;" >预估重量：</span>
							<a-input style="width: 5%;" v-decorator="['weight']"/>
							<a-select  v-decorator="[ 'weightUnit', {initialValue: '公斤'}]" style="width: 80px;margin-left: 10px;">
								<a-select-option value="公斤"> 公斤 </a-select-option>
								<a-select-option value="吨"> 吨 </a-select-option>
							</a-select>
							<span style="margin-left: 10px;">预估体积：</span>
							<a-input style="width: 5%;" v-decorator="['volume']" />
							<span style="margin-left: 10px;">立方米</span>
							<span style="margin-left: 10px;">数量：</span>
							<a-input style="width: 5%;" v-decorator="['totalNums']"/> 
							<span style="margin-left: 10px;">件</span>
					</a-form-item>

					</div>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px;margin-top:10px; margin-bottom:10px
				 " />
				<div class="route_choice">
					<p>
						<b>需求说明</b>
					</p>
					<a-form-item label="车辆需求" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-select style="width: 20%;"  v-decorator="[ 'carLengthKey' , {rules: [{ required: true, message: '请选择车长！' }]}]"  placeholder="请选择车长">
							<!-- <a-select-option :value="item.dictKey" v-for='(item,index)  in Conductor' key="index">
								{{item.dictValue}}
							</a-select-option> -->
						</a-select>
						<a-select  style="width: 20%;margin-left: 10px;" v-decorator="[ 'selectCarKey', {rules: [{ required: true, message: '选择车辆类型！' }]}]"  placeholder="选择车辆类型">
							<!-- <a-select-option :value="item.dictKey" v-for="(item,index) in vehicleType" key="index">
								{{item.dictValue}}
							</a-select-option> -->
						</a-select>
						<span style="margin-left: 10px;">（填写车辆需求信息，为您精准匹配相关车源。）</span>
					</a-form-item>
					<a-form-item label="期望运价" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-input style="width: 20%;"  v-decorator="['expectPrice']" />
						<span style="margin-left: 10px;">元    &nbsp; （填写期望运价，为您精准匹配车源信息，如不填写，默认显示为“面议”）</span>
					</a-form-item>
					<a-form-item label="有效期" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-input style="width:20%;"  v-decorator="['validDay']" />&nbsp;&nbsp;天
						<a-checkbox style="margin-left: 10px;" v-decorator="['longCargo']">长期货源</a-checkbox>
					</a-form-item>
					<a-form-item label="说明" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
						<a-textarea  style="width: 80%;" v-decorator="['remark']" :rows="3" />
					</a-form-item>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; margin-top:10px; margin-bottom:10px" />
				<div class="route_choice">
					<p><b>联系方式</b></p>
					<a-row>
						<a-col :span="8">
							<a-form-item label="发货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['sendPerson', {rules: [{ required: true, message: '发货人不能为空！' }]}]" />
							</a-form-item>
							<a-form-item label="收货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['receivePerson']" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="发货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['sendMobile', {rules: [{ required: true, message: '发货人手机不能为空！' }]}]" />
							</a-form-item>
							<a-form-item label="收货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['receiveMobile']" />
							</a-form-item>
						</a-col>
						<!--<a-col :span="8">
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('0')">选择常用发货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model='addDeliver'>保存到常用发货人</a-checkbox>
							</a-form-item>
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('1')">选择常用收货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model="addReceiving">保存到常用收货人</a-checkbox>
							</a-form-item>
						</a-col>-->
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 20px; margin-top:10px; margin-bottom:10px" />
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-22 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-checkbox v-model='agreement'>
									<!--本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！-->
									我已阅读并接受<a href="JavaScript:;">《云南国际物流云用户协议》</a><a href="JavaScript:;">《用户信息发布协议》</a>
								</a-checkbox>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button type="primary"  :disabled="!agreement" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
									立即发布
								</a-button>
							</span>
						</div>
					</div>
				</div>
				</div>
			</a-form>
		</div>
		<!--选择常用发货人-->
		<!-- <personnel-list ref="PersonnelDialog" @PersonnelData="getPersonnelData"></personnel-list> -->
		<!--地图Svg显示位置-->
		<!-- <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg> -->
</template>
<script>
	import PersonnelList from '@/components/dialog/PersonnelList'
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import { mapState } from 'vuex'
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
	data () {
		return {
			loading: false,
			imageUrl: '',
			agreement:false,
				goodsType:[],// 货物类型
				vehicleType:[],// 车辆类型
				Conductor:[],// 车长
				vehIng_one:'',
				vehIng_two:'',
				vehIng_three:'',
				vehIng_four:'',
				
				fileList: [],
				previewImage:'',
				loading:false,
				previewVisible:false,
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance:'',
				
				addDeliver:true,
				addReceiving:true,
				
				form: this.$form.createForm(this),
		}
	},
	methods: {
		handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
	},
	beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    },
		departureShowMap(){

		},
		destinationShowMap(){

		},
		getdestinationStreet(){

		},
		getdepartureStreet(){
			
		}

	},
}
</script>
<style lang="less">
 .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
	}
	.route_bg{
		padding:10px 0px;
		background:lightgray;
	}
	

</style>

